﻿
@{
    ViewData["Title"] = "广告信息";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<link href="~/ui/plugins/verUpload/asset/upload.css" rel="stylesheet" />
<div class="container-div white-bg">
    <div class="ibox-content">
        <form class="form form-horizontal" id="form" autocomplete="off">
            <input type="hidden" name="id" id="id" value="">
            <div class="form-group">
                <label class="col-sm-3 control-label required">广告标题：</label>
                <div class="col-sm-6">
                    <input type="text" name="ad_title" id="ad_title" value="" class="form-control" data-rule="required">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">广告链接：</label>
                <div class="col-sm-6">
                    <input type="text" name="ad_href" id="ad_href" value="#" class="form-control" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">启用状态</label>
                <div class="col-sm-6">
                    <div class="checkbox checkbox-success checkbox-inline">
                        <input type="checkbox" id="enable_status" name="ad_status" value="1" checked>
                        <label for="enable_status">启用</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">广告图片</label>
                <div class="col-sm-6">
                    <div class="cupload-upload-box" id="uploader">
                        <span class="cupload-upload-btn">+</span>
                    </div>
                    <ul class="cupload-image-boxs" id="imgList">
                    </ul>
                    <input type="hidden" name="ad_image" id="ad_image" value="" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">广告尺寸</label>
                <div class="col-sm-6">
                    <p>
                        宽度：<input type="number" name="image_width" id="image_width" placeholder="宽度" value="100" class="form-control" style="width:200px;">
                    </p>
                    <p>高度：<input type="number" name="image_height" id="image_height" placeholder="高度" value="100" class="form-control" style="width:200px;"></p>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="footerbar">
                <div class="col-sm-12 col-sm-offset-3">
                    <button class="btn btn-primary" type="submit">
                        <i class="fa fa-check"></i>
                        保存
                    </button>
                    <button class="btn btn-danger" type="button" onclick="cancel()">
                        <i class="fa fa-reply-all"></i>关闭
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="~/ui/plugins/verUpload/verUpload.js"></script>
@section scripts{
    <script>

        $(function () {
            var id = jutils.getQueryParam("id");
            $("#id").val(id);

            $('#form').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    var adImage = $('#ad_image').val();
                    if (jutils.empty(adImage)) {
                        jutils.error("请设置广告图片");
                        return;
                    }
                    jutils.ajaxPost('/SiteSet/Ad/Save', $(form).serialize(), function (res) {
                        if (res.status) {
                            jutils.success("保存成功");
                            cancel();
                        }
                    });

                }
            });
            initUpload();
            loadData();
        });


        function loadData() {
            var id = $("#id").val();
            if (id !== '0') {
                jutils.ajaxGet('/SiteSet/Ad/getmodel', { id: id }, function (res) {
                    var model = res.data.model;
                    $('#form').initFormData(model);
                    initImage(model.ad_image);
            });
            }
        }
        function initUpload() {
            new verUpload({
                files: "#uploader",
                name: "files",
                load_list: true,
                method: '/api/upload/Uploadimg',
                success: function (d) {
                    var res = JSON.parse(d);
                    if (res.status) {
                        initImage(res.data.url);

                    } else {
                        jutils.error("图片上传失败");
                    }
                },
                fail: function (d) {
                    jutils.error(d);
                },
                size: 1024 * 2,
                ext: ['jpg', 'jpeg', 'png']
            });

        }

        function initImage(imgUrl) {

            $('#ad_image').val(imgUrl);
            var imgHtml = '<li class="cupload-image-box" style="position:relative;">';
            imgHtml += '<img class="cupload-image-preview" src = "' + imgUrl + '" />';
            imgHtml += '<div class="cupload-image-delete" onclick="deletImage(this)" data-url="' + imgUrl + '">x</div>';
            imgHtml += '</li>';
            $('#imgList').append(imgHtml);
            $('#uploader').hide();
            $('#imgList').show();

        }

        function deletImage(obj) {

            $imgli = $(obj).parent('li');
            jutils.confirm('确认删除图片吗?', function () {
                $('#ad_image').val('');
                $imgli.remove();
                $('#imgList').hide();
                $('#uploader').show();
                $('.uploadFilesBox').remove();
            })
        }

        function cancel() {
            jutils.closeDialog();
        }
    </script>
}

